<template>
    <view class="container">

        <!-- 步骤指示器 -->
        <view class="step-indicator">
            <view class="step-item" :class="{ active: currentStep >= 1 }">
                <view class="step-number">1</view>
                <text class="step-text">验证原密码</text>
            </view>
            <view class="step-line" :class="{ active: currentStep >= 2 }"></view>
            <view class="step-item" :class="{ active: currentStep >= 2 }">
                <view class="step-number">2</view>
                <text class="step-text">设置新密码</text>
            </view>
        </view>

        <!-- 第一步：输入原始密码 -->
        <view v-if="currentStep === 1" class="step-content">
            <view class="form-group">
                <text class="label">原始密码</text>
                <uni-easyinput
                    v-model="originalPassword"
                    type="password"
                    placeholder="请输入原始密码"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="btn-container">
                <button class="next-btn" @click="verifyOriginalPassword">
                    下一步
                </button>
            </view>
        </view>

        <!-- 第二步：输入新密码 -->
        <view v-if="currentStep === 2" class="step-content">
            <view class="form-group">
                <text class="label">新密码</text>
                <uni-easyinput
                    v-model="newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="form-group">
                <text class="label">确认新密码</text>
                <uni-easyinput
                    v-model="confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    :clearable="false"
                    class="password-input"
                />
            </view>
            <view class="btn-container">
                <button class="confirm-btn" @click="confirmChangePassword">
                    <text class="btn-text">确认修改</text>
                    <text class="btn-icon">✓</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

// 当前步骤
const currentStep = ref(1)

// 表单数据
const originalPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

// 返回上一页
function goBack() {
    if (currentStep.value === 1) {
        uni.navigateBack()
    } else {
        currentStep.value = 1
        // 清空第二步的数据
        newPassword.value = ''
        confirmPassword.value = ''
    }
}

// 验证原始密码
function verifyOriginalPassword() {
    if (!originalPassword.value) {
        uni.showToast({
            title: '请输入原始密码',
            icon: 'none'
        })
        return
    }

    // 这里可以调用API验证原始密码
    // 模拟验证成功
    uni.showLoading({
        title: '验证中...'
    })

    setTimeout(() => {
        uni.hideLoading()
        currentStep.value = 2
    }, 1000)
}

// 确认修改密码
function confirmChangePassword() {
    if (!newPassword.value) {
        uni.showToast({
            title: '请输入新密码',
            icon: 'none'
        })
        return
    }

    if (!confirmPassword.value) {
        uni.showToast({
            title: '请确认新密码',
            icon: 'none'
        })
        return
    }

    if (newPassword.value !== confirmPassword.value) {
        uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
        })
        return
    }

    if (newPassword.value.length < 6) {
        uni.showToast({
            title: '密码长度不能少于6位',
            icon: 'none'
        })
        return
    }

    // 这里可以调用API修改密码
    uni.showLoading({
        title: '修改中...'
    })

    setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
            title: '密码修改成功',
            icon: 'success'
        })
        
        // 延迟返回上一页
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }, 1000)
}
</script>

<style>
.container {
    min-height: 100vh;
    background-color: #fff;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60rpx 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-number {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
}

.step-item.active .step-number {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: #fff;
}

.step-text {
    font-size: 24rpx;
    color: #999;
}

.step-item.active .step-text {
    color: #4CAF50;
}

.step-line {
    width: 120rpx;
    height: 4rpx;
    background-color: #e0e0e0;
    margin: 0 20rpx;
    margin-bottom: 16rpx;
}

.step-line.active {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.step-content {
    padding: 0 20rpx;
}

.form-group {
    margin-bottom: 40rpx;
}

.label {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.password-input {
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    background-color: #fafafa;
}

.password-input :deep(.uni-easyinput__content) {
    background-color: transparent;
    border: none;
}

.password-input :deep(.uni-easyinput__content-input) {
    padding: 24rpx 20rpx;
    font-size: 28rpx;
}

.btn-container {
    margin-top: 60rpx;
}

.next-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    margin-right: 10rpx;
}

.btn-icon {
    font-size: 24rpx;
    color: #fff;
    margin-left: 8rpx;
}
</style> 